/**
 * 数据列表
 */

import { FC } from "react";
import { DataTableBox } from "./style";
import { Table } from "antd";
import { ColumnsType } from "antd/es/table";
import { IDateCountGoodsPart, IDateCountGoodsStatus, IDateCountLoadingStatus, IDateCountShipCount } from "../../../../../type/DataStatistics/api";

const DataTable:FC<{
    datalistOne:IDateCountGoodsStatus[],
    datalistTwo:IDateCountGoodsPart[],
    datalistThr:IDateCountShipCount[],
    datalistFour:IDateCountLoadingStatus[],
}> = ({
    datalistOne,
    datalistTwo,
    datalistThr,
    datalistFour,
})=>{

    const columnsOne: ColumnsType<IDateCountGoodsStatus> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => `${index + 1}`,
        }, 
        {
            title: "品种",
            align: "center",
            dataIndex:"product"
        },  
        {
            title: "吨位",
            align: "center",
            dataIndex:"suttleCount"
        },     
    ];//品种销售情况
    const columnsTwo: ColumnsType<IDateCountGoodsPart> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => `${index + 1}`,
        }, 
        {
            title: "品种",
            align: "center",
            dataIndex:"product"
        },  
        {
            title: "销量占比",
            align: "center",
            dataIndex:"proportion",
        },        
    ];//品种销售占比
    const columnsThr: ColumnsType<IDateCountShipCount> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => `${index + 1}`,
        }, 
        {
            title: "客户名称",
            align: "center",
            dataIndex:"consignee"
        },  
        {
            title: "吨位",
            align: "center",
            dataIndex:"sellCount"
        },         
    ];//客户发运量统计
    const columnsFour: ColumnsType<IDateCountLoadingStatus> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => `${index + 1}`,
        }, 
        {
            title: "时间范围",
            align: "center",
            render: (text, record, index) => `${record.date + ' '}${record.startHour}:00-${record.endHour}:00`,
        },  
        {
            title: "车数",
            align: "center",
            dataIndex:"carCount"
        },       
    ];//当日装车情况
    return (
        <DataTableBox>
            <div className="table">
                <div className="tabletitle">品种销售情况</div>
                <Table
                    columns={columnsOne} 
                    dataSource={datalistOne} 
                    pagination={false} 
                    scroll={{ y: 230 }}
                    />
            </div>
            <div className="table">
                <div className="tabletitle">品种销量占比</div>
                <Table
                    columns={columnsTwo} 
                    dataSource={datalistTwo} 
                    pagination={false}
                    scroll={{ y: 230 }}
                    />

            </div>
            <div className="table">
                <div className="tabletitle">客户发运量统计</div>
                <Table 
                    columns={columnsThr} 
                    dataSource={datalistThr} 
                    pagination={false}
                    scroll={{ y: 230 }}
                    />

            </div>
            <div className="table">
                <div className="tabletitle" style={{display:'flex', justifyContent:'space-between'}}>
                    <span>当日装车情况</span>
                    <span style={{
                        transform:'translateY(10px)',
                    }}>装车总车数:{datalistFour.reduce((prev,cur)=>{
                        return prev + cur.carCount
                    },0)}</span>
                </div>
                <Table 
                    columns={columnsFour} 
                    dataSource={datalistFour} 
                    pagination={false} 
                    scroll={{ y: 230 }}
                    />
            </div>
        </DataTableBox>
    )
}

export default DataTable;